<!DOCTYPE html>
<html xmlns:th="http://wwww.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>租借记录一览</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <link rel="stylesheet" th:href="@{/layui/css/layui.css}"  media="all" >
  <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body>

<div class="demoTable layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">器材类型</label>
    <div class="layui-input-inline">
      <select class="layui-input" id="inputEquType" name="equtype" lay-filter="equtype">
        <option value="-1">任意</option>
        <option th:each="equType:${equTypeList}" th:value="${equType}" th:text="${equType}"></option>
      </select>
    </div>

    <label class="layui-form-label">维修状态</label>
    <div class="layui-input-inline">
      <select class="layui-input" id="inputServiceStatus" name="rentstatus" lay-filter="equstatus">
        <option value="-1">任意</option>
        <option value="1">已完成</option>
        <option value="0">未完成</option>
      </select>
    </div>

    <button class="layui-btn" data-type="reload">搜索</button>
  </div>
</div>

<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
  {{#  if(d.servicestatus == 0){ }}
  <a th:if="${session?.user?.role} != null and ${session?.user?.role} != 3" class="layui-btn layui-btn-xs" lay-event="finish">完成维修</a>
  {{# } }}
  {{#  if(d.servicestatus == 1){ }}
  <span th:if="${session?.user?.role} != null and ${session?.user?.role} != 3">无需操作</span>
  {{# } }}
  <span th:if="${session?.user?.role} == null or ${session?.user?.role} == 3">无需操作</span>
</script>




<script>
  layui.use('table', function(){
    var table = layui.table;

    table.render({
      elem: '#test'
      ,url:'/equ/allServiceList'
      ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
      ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
        title: '提示'
        ,layEvent: 'LAYTABLE_TIPS'
        ,icon: 'layui-icon-tips'
      }]
      ,title: '租借记录一览'
      ,cols: [
        [
          {field:'serviceid', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
          ,{field:'equid', title:'器材ID', width:160, sort: true}
          ,{field:'equType', title:'器材类型', width:160, sort: true}
          ,{field:'equNum', title:'数量', width:160}
          ,{field:'servicestartdate', title:'报修日期', width:160, sort: true}
          ,{field:'serviceenddate', title:'报修完成日期', width:160, sort: true, templet: statusFormat}
          ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:210}
        ]
      ]
      ,id: 'serviceList'
      ,page: true
    });

    var $ = layui.$, active = {
      reload: function(){
        var inputType = $('#inputEquType');
        var inputStatus = $('#inputServiceStatus');

        //执行重载
        table.reload('serviceList', {
          page: {
            curr: 1 //重新从第 1 页开始
          }
          ,where: {
            equtype: inputType.val()
            ,servicestatus: inputStatus.val()
          }
        });
      }
    };

    $('.demoTable .layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

    function statusFormat(d) {
      var str;
      if (d.servicestatus == 0) {
        str = "尚未完成";
      } else {
        str = d.serviceenddate;
      }
      return str;
    }

    //头工具栏事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'getCheckData':
          var data = checkStatus.data;
          layer.alert(JSON.stringify(data));
          break;
        case 'getCheckLength':
          var data = checkStatus.data;
          layer.msg('选中了：'+ data.length + ' 个');
          break;
        case 'isAll':
          layer.msg(checkStatus.isAll ? '全选': '未全选');
          break;

              //自定义头工具栏右侧图标 - 提示
        case 'LAYTABLE_TIPS':
          layer.alert('这是工具栏右侧自定义的一个图标按钮');
          break;
      };
    });

    //监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;
      //console.log(obj)
      if (obj.event === 'finish') {
        layer.confirm('请确认该器材已经维修完成', function(index){
          $.post("/equ/finish",
                  {
                    serviceId: data.serviceid
                    ,userId: "1"
                  },
                  function () {
                    location.reload();
                  }
          );
        });
      }
    });
  });
</script>

</body>
</html>